<template>
  <div class="warp">
    <h1>{{title}}</h1>
    <!-- slot 插槽标签 -->
    <!-- vue规定:每一个slot插槽,都要有一个name名称,如果没有书写,则默认name的值是default -->
    <slot></slot>

    <!-- 
        作用域插槽:
            数据在组件中,我们希望把数据传递给组件的使用者,但组件的使用则在传递插槽的时候,要使用组件内的数据
     -->
    <slot name='footer' :msg='msg' count='1' sex='nan'></slot>
  </div>
</template>

<script>
export default {
    name:'Tab',
    props:['title'],
    data(){
        return {
            msg:['daw','xiaw','wzw']
        }
    }
}
</script>

<style scoped>
    .warp{
        width: 230px;
        height: 340px;
        background-color: aqua;
    }

    .warp h1{
        background-color: blue;
    }
</style>